﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Rotozoom</title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
    <script src="http://malsup.github.com/jquery.form.js"></script>
    <script src="http://eightmedia.github.com/hammer.js/hammer.js"></script>
    <script src="http://eightmedia.github.com/hammer.js/jquery.hammer.js"></script>
   
    
    <script src="/javascripts/rotozoom.js"></script>           
    
    <script src="http://riagora.com/mobile/hammer/myLogic.js"></script>
    <link href="/javascripts/stylesheets/style.css"  type="text/css" rel="stylesheet" />
    <link href="http://fonts.googleapis.com/css?family=Bree+Serif" rel="stylesheet" type="text/css" />        
    

</head>
<body>    

    
    <form method="get" action="rotozoom.html" id="submitForm" enctype="text/plain">
        
        Photo Path : <input id="photoPath" name="photoPath" type="text" value="http://lorempixel.com/g/400/200/sports/2/" />
        <button type="submit" id="submit" >submit</button>
    </form>         

    <br />
    <p>Rotozoom</p>
<div id="zoomwrapper">
    <div id="zoom" class="zoomProps" >
        <div class="polaroid">
            <img id="photo0" alt="waiting" width="200" src="http://lorempixel.com/g/400/200/sports/1/" />
        </div>
    </div>
       <div id="zoom2"class="zoomProps"  >
        <div class="polaroid">
            <img id="photo1" src="" alt="" width="200" />
        </div>
    </div>
    <div id="zoom3" class="zoomProps" >
        <div class="polaroid">
            <img id="photo2" src="" alt="" width="200" />
        </div>
    </div>
</div>



</body>
</html>
